<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue05</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="watch-example">
			<a v-bind:href="url"> {{url}} </a>
		</div>
		<script>
			var vm = new Vue({
				el:"#watch-example",
				data:{
					location:{
						protocal: 'http:',
						host: 'www.qq.com'
					},
					url:""
				},
				watch:{
					location:{
						handler: function(newValue, oldValue){
							console.log("newValue=" + newValue);
							this.url = newValue.protocal + "//" + newValue.host;
						},
						// immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法
						immediate:true,
						// 对象内部的属性监听，也叫深度监听,数组的变化，不需要深度watch
						deep:true,
					},
					
				}
			});
			
		</script>
	</body>
</html>
